<template>
	<view >
		<view class="location">推荐</view>
		<button class="getLocation" size="mini" @click="getLocation">定位</button>
		<view class="hotcity" >热门城市</view>
		<block v-for="(item,index) in hotCitys" :key="index">
			<button  @click='selectCity' :data-val="item" class="btn" size="mini">{{item}}</button>
		</block>
	</view>
</template>

<script>
export default{
	data(){
		return{
			hotCitys:[],//热门城市
		}
	},
	methods:{
		//点击定位按钮获取当前位置
		getLocation(){
			const app = getApp()
			wx.getLocation({
				success:function(res){
					console.log(res)//longitude  latitude
					wx.request({
						url:'http://iwenwiki.com:3002/api/lbs/location',
						data:{
							latitude:res.latitude,
							longitude:res.longitude
						},
						success:result=>{
							// console.log(result.data.result)
							console.log(result.data.result.ad_info.city)
							const citys = result.data.result.ad_info.city
							const cityName = citys.slice(0,citys.length-1);
							//把获取到的城市名字缓存到本地
							wx.setStorageSync('cityName',cityName);
							wx.switchTab({
								url:'../food/food'
							})
						}
					})
				}
			})
		},
		selectCity(e){
			const citys = e.currentTarget.dataset.val;
			wx.setStorageSync('cityName',citys);
			wx.switchTab({
				url:'../food/food',
			})
	},
	onLoad() {
		//获取热门城市
		wx.request({
			url: 'http://iwenwiki.com:3002/api/hot/city',
			success:res=>{
				// console.log(res.data)
				this.hotCitys=res.data.data
			}
		})		
		},
	}
}
</script>

<style>
	.location,.hotcity{
		padding: 20rpx;
		font-weight: bold;
		font-size: 36rpx;
	}
	.getLocation{
		color:green;
		margin-left:20rpx;
		backgroud:#eee;
	}
	.btn{
		margin:10rpx;
		font-weight: normal;
		background: #fff;
		border: 1px solid #999;
		border-radius: 10rpx;
		font-size: 30rpx !important;
		padding: 4rpx 16rpx !important;
	}
</style>
